<template>
  <div>
    <div style="height: 120px; margin: 0 auto; color: #666666; font-size: 12px;">
      <h1 style="font-size: 20px; margin-top: 35px;">云时空，让医药行业生态链更智慧</h1>
      <p style="margin-top: 25px;">以用户为核心，专注医药行业，助力企业成长</p>
    </div>

    <div style="height: 398px;">
      <div style="display: inline-block">
        <div style="display: inline-block">
          <div>
            <div class="medication-div-a" style="width: 150px; height: 94px;">
              <p class="medication-p-a">医药批发</p>
              <p class="medication-p-b">管理解决方案</p>
            </div>
            <div class="medication-div-a" style="width: 150px; height: 94px;">
              <p class="medication-p-a">医药连锁</p>
              <p class="medication-p-b">管理解决方案</p>
            </div>
            <div class="medication-div-a" style="width: 150px; height: 94px;">
              <p class="medication-p-a">医疗器械</p>
              <p class="medication-p-b">管理解决方案</p>
            </div>
            <div class="medication-div-a" style="width: 150px; height: 94px;">
              <p class="medication-p-a">中药饮片</p>
              <p class="medication-p-b">管理解决方案</p>
            </div>
          </div>
          <div style="margin-top: 6px">
            <div class="medication-div-a" style="width: 184px; height: 91px;">
              <p class="medication-p-a">门诊(卫生院)</p>
              <p class="medication-p-b">管理解决方案</p>
            </div>
            <div class="medication-div-a" style="width: 116px; height: 91px;">
              <p class="medication-p-a">中医馆</p>
              <p class="medication-p-b">管理解决方案</p>
            </div>
            <div class="medication-div-a" style="width: 116px; height: 91px;">
              <p class="medication-p-a">智慧药店</p>
              <p class="medication-p-b">管理解决方案</p>
            </div>
            <div class="medication-div-a" style="width: 184px; height: 91px;">
              <p class="medication-p-a">食品(保化)</p>
              <p class="medication-p-b">管理解决方案</p>
            </div>
          </div>
        </div>
        <div class="medication-div-a" style="width: 96px; height: 195px; margin: 0;">
          <p class="medication-p-a">微会员</p>
          <p class="medication-p-b">解决方案</p>
        </div>
      </div>

      <div style="display: inline-block; margin-top: 6px">
        <div style="display: inline-block">
          <div>
            <div class="medication-div-a" style="width: 115px; height: 82px;">
              <p class="medication-p-c">B2B解决方案</p>
            </div>
            <div class="medication-div-a" style="width: 185px; height: 82px;">
              <p class="medication-p-c">O2O解决方案</p>
            </div>
            <div class="medication-div-a" style="width: 185px; height: 82px;">
              <p class="medication-p-a">会员营销</p>
              <p class="medication-p-b">CRM解决方案</p>
            </div>
            <div class="medication-div-a" style="width: 115px; height: 82px;">
              <p class="medication-p-a">仓储物流</p>
              <p class="medication-p-b">WMS解决方案</p>
            </div>
          </div>
          <div style="margin-top: 6px">
            <div class="medication-div-a" style="width: 155px; height: 85px;">
              <p class="medication-p-a">返利、询价</p>
              <p class="medication-p-b">解决方案</p>
            </div>
            <div class="medication-div-a" style="width: 147px; height: 85px;">
              <p class="medication-p-a">第三方物流</p>
              <p class="medication-p-b">3PL解决方案</p>
            </div>
            <div class="medication-div-a" style="width: 122px; height: 85px;">
              <p class="medication-p-a">电商一体化</p>
              <p class="medication-p-b">解决方案</p>
            </div>
            <div class="medication-div-a" style="width: 176px; height: 85px;">
              <p class="medication-p-a">解决方案</p>
              <p class="medication-p-b">移动助手</p>
            </div>
          </div>
        </div>
        <div class="medication-div-a" style="width: 96px; height: 177px; margin: 0;">
          <p class="medication-p-a">客户协同</p>
          <p class="medication-p-b">解决方案</p>
        </div>
      </div>
    </div>

    <div id="medication-div-footer">
      <el-button style="font-size: 18px;width: 180px; height: 55px; margin-top: 45px"
                 @click="dialogFormVisible = true">马上体验
      </el-button>
    </div>


    <el-dialog title="请填写您的信息" :visible.sync="dialogFormVisible">
      <span style="color: #666666; font-size: 12px;">亲爱的朋友，为更好的为您服务，请您填写以下信息或致电400-86-18580，我们的工作人员会尽快与您联系！</span>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="手机" prop="customerPhone">
          <el-input v-model="ruleForm.customerPhone"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="customerName">
          <el-input v-model="ruleForm.customerName"></el-input>
        </el-form-item>
        <el-form-item label="行业" prop="customerIndustry">
          <el-input v-model="ruleForm.customerIndustry"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right">
          <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button type="warning" @click="dialogFormVisible = false">返回</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "MedicationView",
  data() {
    return {
      /*新增客户*/
      dialogFormVisible: false,
      ruleForm: {
        customerPhone: '',
        customerName: '',
        customerIndustry: '',
      },
      rules: {
        customerPhone: [
          {required: true, message: '请输入您的手机号', trigger: 'blur'},
          {pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur'}
        ],
        customerName: [
          {required: true, message: '请输入您的姓名', trigger: 'blur'},
          {min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur'}
        ],
        customerIndustry: [
          {required: true, message: '请输入您所在行业', trigger: 'blur'},
          {min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur'}
        ]
      },
      formLabelWidth: '100px'


    }
  },

  methods:{
    /*添加*/
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:8080/customer/insert';
          let jsonData = {
            customerPhone: this.ruleForm.customerPhone,
            customerName: this.ruleForm.customerName,
            customerIndustry: this.ruleForm.customerIndustry
          };
          this.axios({
            method: 'post',
            url: url,
            headers: { 'Content-Type': 'application/json' },
            data: JSON.stringify(jsonData)       //将参数转为json格式
          }).then((response) =>{
            let jsonResult = response.data;
            if (jsonResult.code == 200){
              this.$message({
                message:'提交成功!',
                type:'sucess'
              });
              this.resetForm(formName);
              this.dialogFormVisible = false;
            }else {
              this.$alert(jsonResult.message, '错误', {
                confirmButtonText: '确定',
                callback: action => {
                }
              });
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  }


}
</script>

<style scoped>
#medication-div-footer {
  margin-top: 30px;
  height: 130px;
  background-image: url('../../../assets/footer.jpg')
}
.medication-div-a {
  color: white;
  font-size: 14px;
  vertical-align: top;
  display: inline-block;
  margin-right: 10px;
  background-image: url("https://22159555.s21i.faiusr.com/4/ABUIABAEGAAg2faS8wUolMrXnQQwsAk4sAk!200x200.png.webp");
}
.medication-p-a{
  position: relative;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.medication-p-b{
  position: relative;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.medication-p-c{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>